

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebRTC caoture video and audio</title>
       <style>
              .none {
                      -webkit-filter: none;
              }

              .blur {
                      -webkit-filter: blur(3px);
              }

              .grayscale {
                      -webkit-filter: grayscale(1);
              }

              .invert {
                      -webkit-filter: invert(1);
              }

              .sepia {
                      -webkit-filter: sepia(1);
              }

       </style>

</head>
<body>
       <!--音频源，音频是输出，视频源-->

       <div>
       <label>audio Source:</label>
       <select id = "audioSource"></select>
       </div>

       <div>
       <label>audio Output:</label>
       <select id = "audioOutput"></select>
       </div>

       <div>
       <label>video Source</label>
       <select id = "videoSource"></select>
       </div>


       <div>
               <label>Filter: </label>
              <select id="filter">
                     <option value="none">None</option>
                     <option value="blur">blur</option>
                     <option value="grayscale">Grayscale</option>
                     <option value="invert">Invert</option>
                     <option value="sepia">sepia</option>
              </select>
       </div>

       <!--增加audio标签，只采集音频数据, controls会将暂停和播放按钮显示出来-->
<!--       <audio  autoplay controls id="audioplayer"></audio>-->

       <section>
       <table>
              <tr>
       <!--video元素里可以显示我们捕获的音视频数据-->
       <!--autoplay属性表示我们拿到视频源的时候直接将它播放出来，playsinline 表示在浏览器的页面中播放-->
       <!-- 一行两列，第一列显示捕获的视频，第二列显示视频约束-->
           <td> <video  autoplay playsinline  id="player"></video></td>
           <td><div id="constraints" class="output"></div></td>
              </tr>
       </table>
       </section>
       <div>
              <button id="snapshot">Take snapshot</button>
           <canvas id="picture"></canvas>
       </div>


       <!--引入adapter.js-->
       <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
       <!--加入一段javascript源码，通过调用  getusermedia这个api来捕获音视频数据，-->
       <script  src = './js/client.js'  ></script>

</body>

</html>